<template>
  <music-list
    :title="title"
    :bgImage="bgImage"
    :songs="songs"
    :rank="true"
    ></music-list>
</template>

<script>
import { mapGetters } from 'vuex'
import { getRankDetail } from 'api'
import MusicList from 'components/music-list/music-list'

export default {
  name: 'TopList',
  components: {
    MusicList
  },
  data () {
    return {
      songs: []
    }
  },
  created () {
    this._getRankDetail()
  },
  computed: {
    title () {
      return this.topList.title
    },
    bgImage () {
      return this.topList.mbFrontPicUrl
    },
    ...mapGetters([
      'topList'
    ])
  },
  methods: {
    _getRankDetail () {
      if (!this.topList.topId) {
        this.$router.push({
          path: '/rank'
        })
        return
      }
      getRankDetail({
        id: this.topList.topId
      }).then((data) => {
        // console.log(data)
        this.songs = data.musicList
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
